<template>
  <div class="cart">
    <!-- 顶部 -->
    <div class="top">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元免邮费</div>
    </div>
    <!-- 列表 -->
    <div class="cartlist">
      <van-swipe-cell class="item" v-for='item in list' :key='item.id'>
        <div class="box">
          <div class="left">
            <van-checkbox v-model="item.isChecked"></van-checkbox>
            <div class="img">
              <img :src="item.list_pic_url" alt="">
            </div>
            <div class="info">
              <div class="name">{{item.goods_name}}</div>
              <div class="price">￥{{item.retail_price}}</div>
            </div>
          </div>
          <div class="right">x{{item.number}}</div>
        </div>
        <!-- 删除 -->
        <template #right>
          <van-button class="delete-button" square text="删除" type="danger" @click="delEvents(item.id)" />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 暂无商品 -->
    <div v-if="list.length==0" class="nogoods">
      <img src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/noCart-a8fe3f12e5.png" alt="">
      <div>购物车空空如也</div>
    </div>
    <!-- 下单 -->
    <div class="fixed">
      <van-checkbox v-model="isAllChecked" checked-color="#b4282d">全选</van-checkbox>
      <div class="right">
        <div class="totals">￥{{ total }}</div>
        <div class="submit" @click="onSubmit">下单</div>
      </div>
    </div>
  </div>
</template>

<script>
import { cartList, deleteAction, submitAction } from "@/api/cart";
export default {
  data() {
    return {
      list: [], // 购物车列表
    };
  },
  // 计算
  computed: {
    // 全选
    isAllChecked: {
      get() {
        return this.list.every((ele) => ele.isChecked);
      },
      set(val) {
        this.list.forEach((ele) => (ele.isChecked = val));
        if (this.list.length == 0) {
          this.list.forEach((ele) => (ele.isChecked = false));
        } else {
        }
      },
    },
    // 总价
    total() {
      // reduce((total, current)={},0) 总价初始值 必须有
      return this.list.reduce((total, current) => {
        // 判断是否被选中
        if (current.isChecked) {
          return total + current.retail_price * current.number;
        }
        return total;
      }, 0);
    },
  },
  // 创建
  created() {
    this.init();
  },
  // 准备
  mounted() {},
  // 方法
  methods: {
    // 购物车列表
    init() {
      cartList({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        // 添加新属性checked 必须在赋值之前添加
        res.data.data.forEach((ele) => (ele.isChecked = false));
        this.list = res.data.data;
      });
    },
    // 删除
    delEvents(val) {
      // 弹出框
      this.$dialog
        .confirm({
          title: "删除提示",
          message: "是否删除当前商品",
        })
        .then(() => {
          // 删除商品
          deleteAction({
            id: val,
          }).then((res) => {
            this.init();
          });
        })
        .catch(() => {
          // 轻提示
          this.$toast("您取消了删除");
        });
    },
    // 下单
    onSubmit() {
      // 筛选出被选中的商品
      var goods = this.list.filter((ele) => ele.isChecked);
      // 判断有没有选中的商品
      if (goods.length == 0) {
        this.$toast("请选择商品");
      } else {
        // 提取id
        var item = goods.map((ele) => ele.goods_id);
        // 数组转字符串
        var itemId = item.join(",");
        // 提交订单
        submitAction({
          allPrise: this.total,
          goodsId: itemId,
          openId: localStorage.getItem("openId"),
        }).then((res) => {
          // 跳转页面
          this.$router.push("/cart/order");
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.cart {
  // 顶部
  .top {
    padding: 15px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    div {
      background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png)
        0 center no-repeat;
      background-size: 5px;
      padding-left: 7.5px;
      font-size: 13px;
      color: #666;
    }
  }
  // 列表
  .cartlist {
    padding: 0 10px;
    margin-bottom: 105px;
    background-color: #fff;
    .item {
      padding: 10px 0;
      border-bottom: 0.8px solid #f4f4f4;
      .box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
        .left {
          display: flex;
          align-items: center;
          width: 80%;
          .img {
            width: 62.5px;
            height: 62.5px;
            background-color: #f4f4f4;
            margin-left: 10px;
            img {
              width: 100%;
            }
          }
          .info {
            width: 50%;
            padding: 10px;
            text-align: left;
            .name {
              margin: 12px 0;
            }
            .price {
              margin: 12px 0;
            }
          }
        }
        .right {
          padding-right: 25px;
        }
      }
      // 删除
      .delete-button {
        height: 100%;
      }
    }
  }
  // 暂无商品
  .nogoods {
    margin-top: 150px;
    img {
      margin: 0 auto;
      display: block;
      width: 150px;
      height: 150px;
    }
    div {
      font-size: 20px;
    }
  }
  // 下单
  .fixed {
    width: calc(100% - 10px);
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 50px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    .right {
      display: flex;
      .totals {
        padding-right: 20px;
        color: #b4282d;
        line-height: 50px;
      }
      .submit {
        width: 100px;
        height: 100%;
        text-align: center;
        line-height: 50px;
        font-size: 14px;
        background-color: #b4282d;
        color: #fff;
      }
    }
  }
}
</style>